<template>
  <div class="loveWrap">
    <img :src="imgPath" v-show="imgPath" :class="{ active: activeAni }" :style="{ animationDelay: id + 's' }" />
    <!-- 爱心 -->
    <canvas class="loveCanvas" ref="loveCanvas" width="150" height="150" />
  </div>
</template>
<script>
export default {
  name: 'love',
  computed: {},
  data() {
    return {};
  },
  props: {
    imgPath: String,
    choosed: Boolean,
    id: Number,
    activeAni: Boolean,
  },
  watch: {
    choosed(newVal) {
      if (newVal) {
        this.ctx_img.clearRect(0, 0, this.can_obj.width, this.can_obj.height); // 清除画布
        this.drawLove('#6c47ff', 'rgba(255,255,255,0)');
      } else {
        this.ctx_img.clearRect(0, 0, this.can_obj.width, this.can_obj.height); // 清除画布
        this.drawLove('#ffffff', 'rgba(255,255,255,0)');
      }
    },
    imgPath(newVal) {
      if (newVal) {
        this.ctx_img.clearRect(0, 0, this.can_obj.width, this.can_obj.height); // 清除画布
        this.drawLove('#ffffff', 'rgba(255,255,255,0)');
      } else {
        this.ctx_img.clearRect(0, 0, this.can_obj.width, this.can_obj.height); // 清除画布
        this.drawLove('#ffffff', 'rgba(255,255,255,0)');
      }
    },
  },
  created() {},
  mounted() {
    this.can_obj = this.$refs.loveCanvas;
    this.can_obj.width = 150;
    this.can_obj.height = 150;
    this.ctx_img = this.can_obj.getContext('2d');
    if (this.imgPath) {
      this.drawLove('#ffffff', 'rgba(255,255,255,0)');
    } else {
      this.drawLove('#ffffff', 'rgba(255,255,255,0)');
    }
  },
  methods: {
    drawLove(strokeColor, fillColor) {
      this.ctx_img.beginPath();
      const grad = this.ctx_img.createLinearGradient(0, 0, this.can_obj.width / 2 + 2, 0);
      grad.addColorStop(0, '#6c47ff');
      grad.addColorStop(1, '#ff68f9');
      this.ctx_img.lineWidth = 2;
      this.ctx_img.strokeStyle = strokeColor === '#ffffff' ? strokeColor : grad;
      this.ctx_img.fillStyle = fillColor;
      this.ctx_img.moveTo(this.can_obj.width / 2 + 2, 143);
      this.ctx_img.bezierCurveTo(this.can_obj.width / 2 - 118, 90, this.can_obj.width / 2 - 63, -30, this.can_obj.width / 2, 25);
      this.ctx_img.moveTo(this.can_obj.width / 2 + 2, 143);
      this.ctx_img.bezierCurveTo(this.can_obj.width / 2 + 118, 90, this.can_obj.width / 2 + 63, -30, this.can_obj.width / 2, 25);
      this.ctx_img.stroke();
      this.ctx_img.fill();
      this.ctx_img.closePath();
    },
  },
  beforeCreated() {},
};
</script>
<style lang="less" scoped>
.loveWrap {
  .loveCanvas {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  img {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .active {
    animation-name: activeAni;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  @keyframes activeAni {
    0% {
      transform: scale(0.2);
      opacity: 0;
    }
    80% {
      transform: scale(1.5);
      z-index: 1;
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }
}
</style>
